<template>
  <a-modal
    v-model:visible="visible"
    :mask-closable="false"
    :keyboard="false"
    title="查看电子签署设置"
    width="900px"
    ok-text=""
  >
    <div class="view-sign-set">
      <a-card>
        <a-form :model="formData" layout="vertical" class="p-lr-20">
          <a-form-item label="是否需要电子签署："> 是 </a-form-item>
          <a-form-item label="电子签署方式：">
            {{ formData.signWay }}
          </a-form-item>
          <a-form-item label="电子签署主体：">
            <a-table
              :pagination="false"
              :row-class-name="(record) => (record.signWay === '组织签章' ? 'footer-color' : '')"
              :data-source="dataList"
              :columns="columns"
            >
            </a-table>
          </a-form-item>
        </a-form>

        <div class="dashed-line m-tb-10"></div>
        <div class="warning-text p-lr-20">
          （1）具体需要签署的文件请在“文件清单”中配置；
          <br />
          （2）电子签名主体人员请在“流程配置”中的审批节点进行设置；
          <br />
          （2）组织签章将在所有审批节点完成后，再流转至机构秘书处进行签章，签章完成后流程结束；
        </div>
      </a-card>
    </div>
    <template #footer>
      <a-button @click="visible = false">取消</a-button>
    </template>
  </a-modal>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { signSet } from '../index'

const columns = ref(signSet)
const visible = ref(false)

const dataList = ref<any>([])
const formData = ref<any>({})

const show = (_dataList: any, _formData: any) => {
  visible.value = true
  formData.value = _formData
  dataList.value = _dataList.list || []
  formData.value.signWay = formData.value.signWay.join('、').replaceAll('1', '个人签名').replaceAll('2', '组织签章')
  if (_dataList.needProcess) {
    if (formData.value.signWay.indexOf('个人签名') === -1) {
      dataList.value = []
    }
    if (formData.value.signWay.indexOf('组织签章') !== -1) {
      dataList.value.push({
        nodeName: '/',
        nodeNumber: '/',
        signMainName: '组织管理员',
        signResult: '任一人签署即可',
        signWay: '组织签章'
      })
    }
  } else {
    dataList.value = []
  }
}

// 暴露给父组件的方法
defineExpose({
  show
})
</script>
<style lang="less">
.view-sign-set {
  .footer-color {
    background-color: #fee9e9;
    &:hover td {
      background-color: #fee9e9 !important;
    }
  }
  .ant-form-item {
    margin-bottom: 0;
  }
  .m-tb-10 {
    margin: 10px 0;
  }
  .p-lr-20 {
    padding: 0 20px;
  }
}
</style>
